<template>
  <div class="h-full overflow-hidden bg-gray-100 font-base">
    <div v-if="isAppLoaded" class="h-full">
      <NotificationRoot />

      <Header />

      <Sidebar />

      <main
        class="h-screen h-screen-ios overflow-y-auto md:pl-56 xl:pl-64 min-h-0"
      >
        <div class="pt-16 pb-16">
          <router-view />
        </div>
      </main>
    </div>

    <BaseGlobalLoader v-else />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Header from './Header1.vue'
import Sidebar from './Sidebar.vue'

// 模板
import NotificationRoot from '@/components/notifications/NotificationRoot.vue'
import BaseGlobalLoader from '@/components/base/BaseGlobalLoader.vue'

const isAppLoaded = ref(true)
</script>